<template>
	<view class="tab-layout">
		<view class="tab-box" @tap="clickTab(index)" v-for="(item, index) in tabs" :key="index">
			<view class="img-block" :class="index === 1 ? 'add' : ''"><image class="icon" mode="aspectFit" :src="index === tabIndex ? item.srcSelected : item.src"></image></view>
			<text class="text" :class="index === tabIndex ? 'tab-text-press' : 'tab-text'">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		currentIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			tabIndex: 0,
			globalData:{},
			tabs: [
				{
					text: '发现',
					path: '/pages/index/index',
					src: 'https://cdn-ssl.meb.com/mwa/v2.6.5/a1.png',
					srcSelected: 'https://cdn-ssl.meb.com/mwa/v2.6.5/a1-press.png'
				},
				{
					text: '发布',
					path: '/pages/publish/publish',
					src: '../../static/add.png',
					srcSelected: '../../static/add.png'
				},
				{
					text: '我的',
					path: '/pages/my/my',
					src: 'https://cdn-ssl.meb.com/mwa/v2.4.0/tab-center.png',
					srcSelected: 'https://cdn-ssl.meb.com/mwa/v2.4.0/tab-center-press.png'
				}
			]
		};
	},
	created() {
			this.globalData = getApp().globalData
		this.tabIndex = this.currentIndex
	},
	methods: {
		clickTab(index) {
			// 点击发布，没有登录直接跳login页面
			if (index === 1 && !this.globalData.isLogin) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				if (this.tabIndex === index) {
					return;
				} else {
					uni.reLaunch({
						url: this.tabs[index].path
					});
					this.tabIndex = index
				}
			}
		}
	}
};
</script>

<style lang="less" scoped>
.tab-layout {
	width: 750rpx;
	height: 88rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding: 8rpx 0;
	border-top: 1rpx solid #f5f5f5;
	/*iphoneX 适配*/
}
.tab-layout.ipx {
	padding-bottom: 60rpx;
}
.tab-layout .tab-box {
	font-size: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	position: relative;
}
.tab-layout .tab-box .icon {
	width: 54rpx;
	height: 54rpx;
}
.tab-layout .tab-box .tab-text-press {
	font-size: 20rpx;
	color: #d4237a;
	letter-spacing: 0.3rpx;
	text-align: center;
}
.tab-layout .tab-box .tab-text {
	font-size: 20rpx;
	color: #333;
	letter-spacing: 0.3rpx;
	text-align: center;
}
.add {
	position: absolute;
	bottom: 40rpx;
	width: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15rpx;
	padding-bottom: 0rpx;
	background: #fff;
	border-radius: 50%;
}
.tab-layout .tab-box .add > .icon {
	width: 80rpx;
	height: 80rpx;
}
.add ~ .text {
	margin-top: 54rpx;
}
</style>
